<template>
  <view class="account-box">
    <uni-list :border="false">
      <uni-list-item title="手机号" :border="false" :rightText="getPhone(profile.attr?.phone)" />
      <view style="padding: 12px 15px;background-color: #f9f9f9;font-size: 24rpx;color: #999999;">
        绑定信息
      </view>
      <uni-list-item title="微信账号" clickable :border="false" @click="bindAccount" rightText="已绑定" showArrow />
    </uni-list>
  </view>
</template>

<script setup>
import { useStore } from '@/store'
import { computed } from 'vue'
import { storage } from '@/utils/utils'
const store = useStore()
const profile = computed(() => {
  return store.state.profile || {}
})
const getPhone = (value) => {
  value = value || ''
  return value.slice(0, 3) + '****' + value.slice(-4)
}
const bindAccount = () => {
  uni.showModal({
    title: '是否解绑',
    content: '',
    success: function (res) {
      if (res.confirm) {
        const _bellDisp = storage.get('newCustomer')
        store.commit('setProfile', '')
        store.commit('setToken', '')
        uni.clearStorageSync()
        storage.set('newCustomer', _bellDisp)
        uni.switchTab({
          url: '/pages/index'
        })
      }
    }
  })
}
</script>

<style scoped lang="scss">
.account-box{
  height: 100vh;
  background: #F9F9F9;
}
</style>
